import React from 'react';
import {isEmpty, isEqual} from 'lodash';
import {WeaFormItem, WeaSelect, WeaInput, WeaLocaleProvider, WeaHelpfulTip} from 'ecCom';
import EPortalBrowser from "./EPortalBrowser";
const getLabel = WeaLocaleProvider.getLabel;

class ETabStyle extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            tabstyle: this.props.tabstyle || '0',
            tabvalue: this.props.tabvalue || '',
            tabname: this.props.tabname || '',
            tabindex: this.props.tabindex || '',
        }
    }

    getSaveValues() {
        return this.state;
    }

    componentDidUpdate() {
        const {disabled} = this.props
        const {tabstyle} = this.state
        if(disabled == true && tabstyle !== '0'){
            this.setState({tabstyle: '0'});
        }
    }

    render(){
        const { tabvalue, tabname, tabstyle ,tabindex} = this.state;

        const {disabled, displayPosition,tabStyleList={}} = this.props

        let styleIndex='';
        if(tabStyleList && !isEmpty(tabStyleList)){
            tabStyleList.map((item)=>{
                if(item.code == tabvalue){
                    styleIndex=item.name;
                }
            })
        }


        const options = [
            {
                key: "0",
                selected: true,
                showname: getLabel(519417,'跟随元素样式')
            },
            {
                key: "1",
                showname: getLabel(517346,'独立样式') ,
            }
        ];
        return (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4ixe97`} label={getLabel(517347,'tab页样式') } labelCol={{span: 6}} wrapperCol={{span: 16}}>
                <div style={{width : '90px', display: 'inline-block', float: 'left'}}>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@f945e8`}
                        disabled={disabled}
                        options={options}
                        value={tabstyle}
                        onChange={v => {
                            this.setState({tabstyle: v});
                        }}
                    />
                </div>
                {
                    tabstyle == '1' &&
                    <div style={{display: 'inline-block', marginLeft: '10px', width: 'calc(100% - 124px)'}}>
                        <EPortalBrowser ecId={`${this && this.props && this.props.ecId || ''}_EPortalBrowser@g0lsms`}
                            value={tabvalue}
                            tabname={tabname}
                            tabindex = {styleIndex}
                            disabled={disabled}
                            tabStyleList={tabStyleList}
                            hasSearch={true} //搜索按钮
                            title={getLabel(517348,'选择tab页样式') }
                            multiCheck={false}
                            isShow={true}
                            api={'/api/portal/browserstyle/getTabStyle'}
                            style={{width: '54px', marginLeft: '15px', height: '30px', width: '100%'}}
                            onChange={(id, name, datas)=> {
                                if(name==""){
                                    this.setState({tabvalue : id})
                                }else{
                                    const etabwidth = datas && datas[0].tabwidth;
                                    datas && this.props.onChangeTabwidth(etabwidth);
                                    this.setState({tabvalue : id, tabname: name})
                                }

                            }}
                        />

                    </div>
                }
                <div style={{ display: 'inline-block', float: 'left',lineHeight:'30px'}}>
                    {displayPosition  == 'right' ? < WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@bafluq`}
                        width={200}
                        style={{paddingLeft: '8px'}}
                        title={getLabel(519478,'当前元素样式中设置了tab页显示位置在“标题右侧”，此样式不支持使用tab页独立样式')}
                        />
                        :
                        ""
                    }
                </div>
            </WeaFormItem>
        )
    }
}


export default ETabStyle;